<template>
	<view class="top">
		<u-navbar title="我的订单" />
		<view class="top">
			<liuyuno-tabs :tabData="list" :activeIndex="current" @tabClick='tabClick' :pingfen='false' />
			<view class="top_1">
				<text @click="xuan=1" :class="{
					top_1_1:xuan==1,
				}">全部</text>
				<text v-if="current!=3" @click="xuan=2" :class="{
					top_1_1:xuan==2,
				}">待付款</text>
				<text v-if="current!=3&&current!=2" @click="xuan=3" :class="{
					top_1_1:xuan==3,
				}">已付款</text>
				<text v-if="current==2||current==3" @click="xuan=5" :class="{
					top_1_1:xuan==5,
				}">待发货</text>
				<text v-if="current==2||current==3" @click="xuan=6" :class="{
					top_1_1:xuan==6,
				}">待收货</text>
				<!-- 积分商城展示 -->
				<!-- <text v-if="current==3" @click="xuan=3" :class="{
					top_1_1:xuan==3,
				}">已兑换</text> -->

				<!-- 线下课展示 -->
				<text v-if="current==1||current==2||current==3" @click="xuan=4" :class="{ 
					top_1_1:xuan==4,
				}">已完成</text>
			</view>
			<view class="body">
				<view class="carp" v-for="(item,index) in 5">
					<view class="carp_1">
						<view class="carp_1_2">
							<text>订单号：</text>
							<text>2548784595212 </text>
						</view>
						<text class="carp_1_3">{{xuan==3?'已付款':xuan==4?'已完成':"待付款"}}</text>
					</view>
					<view class="xian">

					</view>
					<view class="carp_2">
						<image src="https://s4.ax1x.com/2022/01/28/7vTlyn.jpg" />
						<view class="carp_2_1">
							<view class="carp_2_1_1">
								华彬：用儒家思想，你的人 生难题迎刃而解
							</view>
							<view class="carp_2_1_2" v-if="current!=3">
								<text>￥120.00</text>
								<text>×1</text>
							</view>
							<view class="carp_2_1_2 _item1" v-else>
								<text>
									<image
										style="width: 40rpx;position: relative;top: 5rpx;height: 40rpx;margin-right: 10rpx;"
										src="@/static/img/jfg.png" />
									120.00
								</text>
								<text>×1</text>
							</view>
						</view>
					</view>
					<view class="foot">
						<!-- 待付款 -->
						<view class="" v-if="xuan==2||xuan==1">
							<text class="h_1">取消订单</text>
							<text @click="submit(item)">立即付款</text>
						</view>
						<!-- 课程已付款;线下课,购物商城,已完成-->
						<view v-if="xuan==3&&current==0||xuan==4&&current==1||xuan==4&&current==2">
							<text class="h_1" @click="submit(item,'删除订单')">删除订单</text>
						</view>
						<!-- 线下课已付款-->
						<view v-if="xuan==3&&current==1">
							<text class="h_">退订定金</text>
						</view>
						<!-- 购物商城已付款 -->
						<view v-if="xuan==3||xuan==5||xuan==6&&current==2||current==3">
							<text class="h_1" @click="logistics(item)">查看物流</text>
							<text @click="submit(item,'确定收货')">确认收货</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xuan: 1,
				list: [{
						name: '课程',
						width: '150rpx'
					}, {
						name: '线下课',
						width: '160rpx'
					},
					{
						name: '购物商城',
						width: '190rpx'
					},
					{
						name: '积分商城',
						width: '190rpx'
					}
				],
				current: 0
			};
		},
		methods: {
			tabClick(a, b) {
				this.current = b
				console.log(a, b)
			},
			// 查看物流
			logistics(a) {
				uni.navigateTo({
					url: `./logistics?`
				})
			},
			submit(a, b) {
				const data = {
					xuan: this.xuan,
					current: this.current,
					type: b
				}
				if (this.current == 2 || this.current == 3) {
					uni.navigateTo({
						url: `./ddxqgwsc?data=${JSON.stringify(data)}`
					})
					return
				}
				uni.navigateTo({
					url: `./ddxq?type=${this.xuan}&data=${JSON.stringify(data)}`
				})
			},
		},
	}
</script>

<style lang="scss">
	.top {
		.body {
			min-height: 1300rpx;
			background-color: #F5F5F5;
			padding: 2rpx 30rpx 30rpx 30rpx;

			.carp {
				margin: auto;
				background-color: white;
				border-radius: 8rpx;
				margin-top: 30rpx;
				padding: 30rpx 20rpx 30rpx 20rpx;

				.foot {
					margin-top: 50rpx;
					text-align: right;

					.h_1 {
						display: inline-block;
						width: 200rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						border: 1rpx solid #AAAAAA;
						opacity: 1;
						border-radius: 44px;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #999999;
						opacity: 1;
						margin-right: 30rpx;
					}

					text:nth-of-type(2) {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #703F00;
						opacity: 1;
						background-color: #FFD500;
						display: inline-block;
						width: 200rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						opacity: 1;
						border-radius: 44px;
					}

					.h_ {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #703F00;
						opacity: 1;
						background-color: #FFD500;
						display: inline-block;
						width: 200rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						opacity: 1;
						border-radius: 44px;
					}
				}

				.carp_2 {
					display: flex;

					image {
						width: 240rpx;
						height: 160rpx;
						border-radius: 8rpx;
					}

					.carp_2_1 {
						width: 70%;
						padding-left: 20rpx;

						._item1 {
							display: flex;
							align-items: center;

							text:nth-of-type(1) {
								font-size: 30rpx;
								font-family: HarmonyOS Sans;
								font-weight: bold;
								color: #E61E2A;
								opacity: 1;
							}

							text:nth-of-type(2) {
								font-size: 24rpx;
								font-family: HarmonyOS Sans;
								font-weight: 400;
								color: #91969A;
								opacity: 1;
							}
						}

						.carp_2_1_2 {
							margin-top: 25rpx;
							display: flex;
							justify-content: space-between;

							text:nth-of-type(1) {
								font-size: 30rpx;
								font-family: HarmonyOS Sans;
								font-weight: bold;
								color: #E61E2A;
								opacity: 1;
							}

							text:nth-of-type(2) {
								font-size: 24rpx;
								font-family: HarmonyOS Sans;
								font-weight: 400;
								color: #91969A;
								opacity: 1;
							}
						}

						.carp_2_1_1 {
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
							opacity: 1;
						}
					}
				}

				.xian {
					height: 1rpx;
					background: #F5F5F5;
					opacity: 1;
					margin: 20rpx 0 20rpx 0;
				}

				.carp_1 {
					display: flex;
					justify-content: space-between;

					.carp_1_3 {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #E61E2A;
						opacity: 1;
					}

					.carp_1_2 {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #91969A;
						opacity: 1;
					}
				}
			}
		}

		.top_1 {
			padding: 30rpx;

			.top_1_1 {
				background: #FFD500;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #703F00;
				opacity: 1;
			}

			text {
				background: #EEEFF1;
				display: inline-block;
				margin-right: 10rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #91969A;
				opacity: 1;
				padding: 0rpx 20rpx 0rpx 20rpx;
				text-align: center;
				line-height: 58rpx;
				opacity: 1;
				border-radius: 29rpx;
			}
		}

	}
</style>
